<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>收藏</title>
    <link href="../../assets/style/index.css" rel="stylesheet">
</head>
<body>
<!--头部 begin-->
<div class="header-nav">
    <div class="header-nav-main">
        <!--搜索栏-->
        <div class="header-nav-main-search">
            <input type="text" class="search-input" placeholder="选择查找">
            <a href="javascript:void(0);" title="搜索" class="search-input-search">
                <img src="../../assets/images/search.png" class="search-input-image" width="20px" height="20px">
            </a>
        </div>
        <div class="header-nav-main-position">
            <div class="header-nav-right-info">
                <ul class="nav-ul">
                    <li><a href="">首页</a></li>
                    <li><a href="">兴趣</a></li>
                    <li><a href="">阅读</a></li>
                    <li><a href="">有感</a></li>
                </ul>
            </div>
            <div class="header-nav-right-info">
                <ul class="nav-ul">
                    <li>菜单1</li>
                    <li>菜单2</li>
                    <li>菜单3</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--头部 end -->
<!--main begin-->
<div class="mian-nav">
    <div class="main-nav-left">
        <div class="left-top">
            <div class="span-style">
                首页
            </div>
            <div class="span-style">
                消息
            </div>
            <div class="span-style">
                收藏
            </div>
            <div class="span-style">
                赞
            </div>
        </div>
        <div class="left-center">
            <hr/>
        </div>
        <div class="left-buttom">
            <div class="my-menu-list"><div class="user"></div>好友动态</div>
            <div class="my-menu-list"><div class="heart"></div>特别关心</div>
            <div class="my-menu-list"><div class="forme"></div>与我相关</div>
            <div class="my-menu-list"><div class="house"></div>我的收藏</div>
            <div class="left-center">
                <hr/>
            </div>
            <div class="my-min-menu">
                <div class="menu-control">
                    <div class="menu-list-dot"></div>媒体
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>综艺
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>佛教
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>读书
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>摄影
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>历史
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>情感
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>社会
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>搞笑
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>互联网
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>有趣
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>同学
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>名人明星
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>同事
                </div>
                <div class="menu-control">
                    <div class="menu-list-dot"></div>悄悄关心
                </div>
            </div>
        </div>
    </div>
    <!--信息-->
    <div class="main-nav-right">
        <div class="main-info">
            <!--消息的统计-->
            <div class="main-info-option">
                <div class="classify-lists">
                    说说
                </div>
                <div class="classify-lists">
                    照片
                </div>
                <div class="classify-lists">
                    日志
                </div>
                <div class="classify-search-box">
                    <input type="text" placeholder="选择查找">
                    <div class="search-box-img"></div>
                </div>
            </div>
            <!--消息   这儿才是循环的开始    这是一个消息包含的所有的信息  头像  名称  来源  消息体  菜单-->
            <div class="main-info-lists">
                <!--消息体  开始-->
                <div class="info-ele">
                    <!--消息体 用户的头像-->
                    <div class="msg-header">
                        <div class="msg-user-header">
                            <a href="">
                                <img src="../../assets/images/index/msg-user-header.bmp">
                            </a>
                        </div>
                        <div class="msg-user-infom">
                            <div class="msg-user-name">
                                <a class="" href="#">似水流年</a>
                            </div>
                            <div class="msg-time-source">
                                2月10日 09:51 来自 魅族 MX5
                            </div>
                        </div>
                    </div>
                    <!--消息体  内容-->
                    <div class="msg-body">
                        <div class="msg-body-info">
                            我知道，这还远远不够，远远不够
                        </div>
                    </div>
                    <!--消息体 消息菜单-->
                    <div class="msg-buttom">
                        <!--收藏-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-collection.png" alt="" width="20px" height="20px"/>
                                    <span>收藏</span>
                                </a>
                            </div>
                        </div>
                        <!--查看-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-see.png" alt="" width="25px" height="25px"/>
                                    <span>1234</span>
                                </a>
                            </div>
                        </div>
                        <!--交流-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-conmmu.png" alt="" width="25px" height="25px"/>
                                    <span>1234</span>
                                </a>
                            </div>
                        </div>
                        <!--赞-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-like.png" alt="" width="25px" height="25px"/>
                                    <span>1234</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--消息体  end-->
            </div>
            <!--消息   这儿才是循环的开始    这是一个消息包含的所有的信息  头像  名称  来源  消息体  菜单-->
            <div class="main-info-lists">
                <!--消息体  开始-->
                <div class="info-ele">
                    <!--消息体 用户的头像-->
                    <div class="msg-header">
                        <div class="msg-user-header">
                            <a href="">
                                <img src="../../assets/images/index/msg-user-header.bmp">
                            </a>
                        </div>
                        <div class="msg-user-infom">
                            <div class="msg-user-name">
                                <a class="" href="#">似水流年</a>
                            </div>
                            <div class="msg-time-source">
                                2月10日 09:51 来自 魅族 MX5
                            </div>
                        </div>
                    </div>
                    <!--消息体  内容-->
                    <div class="msg-body">
                        <div class="msg-body-info">
                            《大秦帝国》，《李自成》，《张居正》，《穆斯林的葬礼》，《白鹿原》，《历史的天空》……，终归，还是只有自己才懂。
                        </div>
                    </div>
                    <!--消息体 消息菜单-->
                    <div class="msg-buttom">
                        <!--收藏-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-collection.png" alt="" width="20px" height="20px"/>
                                    <span>收藏</span>
                                </a>
                            </div>
                        </div>
                        <!--查看-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-see.png" alt="" width="25px" height="25px"/>
                                    <span>1234</span>
                                </a>
                            </div>
                        </div>
                        <!--交流-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-conmmu.png" alt="" width="25px" height="25px"/>
                                    <span>1234</span>
                                </a>
                            </div>
                        </div>
                        <!--赞-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-like.png" alt="" width="25px" height="25px"/>
                                    <span>1234</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--消息体  end-->
            </div>
            <!--消息   这儿才是循环的开始    这是一个消息包含的所有的信息  头像  名称  来源  消息体  菜单-->
            <div class="main-info-lists">
                <!--消息体  开始-->
                <div class="info-ele">
                    <!--消息体 用户的头像-->
                    <div class="msg-header">
                        <div class="msg-user-header">
                            <a href="">
                                <img src="../../assets/images/index/msg-user-header.bmp">
                            </a>
                        </div>
                        <div class="msg-user-infom">
                            <div class="msg-user-name">
                                <a class="" href="#">似水流年</a>
                            </div>
                            <div class="msg-time-source">
                                2月10日 09:51 来自 魅族 MX5
                            </div>
                        </div>
                    </div>
                    <!--消息体  内容-->
                    <div class="msg-body">
                        <div class="msg-body-info">
                            夫常人安于故习，学者溺于所闻。
                        </div>
                    </div>
                    <!--消息体 消息菜单-->
                    <div class="msg-buttom">
                        <!--收藏-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-collection.png" alt="" width="20px" height="20px"/>
                                    <span>收藏</span>
                                </a>
                            </div>
                        </div>
                        <!--查看-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-see.png" alt="" width="25px" height="25px"/>
                                    <span>1234</span>
                                </a>
                            </div>
                        </div>
                        <!--交流-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-conmmu.png" alt="" width="25px" height="25px"/>
                                    <span>1234</span>
                                </a>
                            </div>
                        </div>
                        <!--赞-->
                        <div class="msg-other-mnue-lists">
                            <div class="msg-other-mnue-lists-box">
                                <a href="">
                                    <img src="../../assets/images/index/msg-like.png" alt="" width="25px" height="25px"/>
                                    <span>1234</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--消息体  end-->
            </div>
        </div>
        <!--用户的信息-->
        <div class="main-right">
            <div class="main-right-top">
                <div class="user-header">
                    <div class="user-header-img"></div>
                </div>
                <div class="user-name">似水流年</div>
                <div class="user-infor">
                    <div class="user-info-style">
                        <div class="box-top">
                            100
                        </div>
                        <div class="box-buttom">
                            说说
                        </div>
                    </div>
                    <div class="user-info-style">
                        <div class="box-top">
                            100
                        </div>
                        <div class="box-buttom">
                            日志
                        </div>
                    </div>
                    <div class="user-info-style" style="border: none">
                        <div class="box-top">
                            100
                        </div>
                        <div class="box-buttom">
                            照片
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--main end-->
</body>
</html>